<template>
  <div class="">
    <GlobalUpload accept=".jpg,.jepg,.png" action="#" :before-open-file-box="beforeOpenUpload" :on-change="onUploadImage">
      <template v-slot:fileSlot>
        <img class="upload-img" v-if="uploadFileUrl" :src="uploadFileUrl" />
        <div v-else class="upload-box">
          <upload-outlined />
          <div class="upload-title">上传图片</div>
        </div>
      </template>
    </GlobalUpload>
  </div>
</template>

<script>
import GlobalUpload from '@/components/globalUpload'

import { notification } from 'ant-design-vue'
import { UploadOutlined } from '@ant-design/icons-vue'
import { reactive, toRefs, onMounted } from 'vue'
export default {
  components: {
    GlobalUpload,
    UploadOutlined
  },
  props: {},
  setup(props, { emit }) {
    // const { proxy, appContext } = getCurrentInstance();
    // #region 变量
    const state = reactive({
      uploadFileUrl: null
    })
    // #endregion

    // #region 生命周期、监听、计算 函数
    onMounted(() => {})
    // #endregion

    // #region 页面操作方法
    const beforeOpenUpload = pass => {
      console.log('上传前的操作')
      pass()
    }
    const onUploadImage = file => {
      if (!file) return
      const isQualified = uploadImageVerify(file) // 验证：图片是否符合要求
      if (!isQualified) return
      console.log('file', file)
      // 上传图片到云服务器，注意取 file.raw
      console.log('file.raw', file.raw)
      getBase64(file.raw, base64Url => {
        state.uploadFileUrl = base64Url
        emit('handleUpload', file.raw)
      })
    }
    const getBase64 = (img, callback) => {
      const reader = new FileReader()
      reader.addEventListener('load', () => callback(reader.result))
      reader.readAsDataURL(img)
    }
    // 验证：图片是否符合要求
    const uploadImageVerify = file => {
      // 判断所传图片的文件类型是否符合jpg、jpeg、png
      const isJPG = file.raw.type === 'image/jpg' || file.raw.type === 'image/jpeg' || file.raw.type === 'image/png'
      if (!isJPG) {
        notification.error({
          message: '提示',
          description: '上传的图片只能是 JPG，JPEG，PNG 格式!'
        })
        return false
      }
      // 判断所传图片的大小是否小于1M
      const isLt2M = file.size / 1024 / 1024 <= 2
      if (!isLt2M) {
        notification.error({
          message: '提示',
          description: '上传图片大小不能超过 2MB!'
        })
        return false
      }
      // 判断所传图片名字长度是否超过100，若上传到服务器会重命名则可不考虑
      const strCodeLength = getStringByteLength(file.name)
      if (strCodeLength > 100) {
        notification.error({
          message: '提示',
          description: `上传图片的名称字节长度不能超过 100! 当前名称长度为 ${strCodeLength}`
        })
        return false
      }
      return true
    }
    // 验证：所传图片名字的长度
    const getStringByteLength = string => {
      if (typeof string !== 'string') return
      const length = new Array(string.length).fill(null).reduce((total, _, i) => {
        const charCode = string.charCodeAt(i)
        total += charCode > 255 ? 2 : 1
        return total
      }, 0)
      return length
    }
    // 更新：图片显示
    const updateUploadFile = (base64) => {
        state.uploadFileUrl = base64
    }
    // #endregion

    return {
      ...toRefs(state),
      beforeOpenUpload,
      onUploadImage,
      updateUploadFile
    }
  }
}
</script>

<style lang="less"></style>

<style lang="less" scoped>
.upload-img {
  width: 300px;
  height: 300px;
  background-color: #e9e9e9;
  border: 1px dashed #bbbab9;
  object-fit: contain;
  cursor: pointer;
}
.upload-box {
  width: 300px;
  height: 300px;
  background-color: #e9e9e9;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8c8c8c;
  border: 1px dashed #bbbab9;
  cursor: pointer;
  .upload-title {
    margin-left: 8px;
  }
  &:hover {
    border-color: #ac7a16;
    color: #ac7a16;
  }
}
</style>
